<template>
  <div class="app-container">
    <div class="card mb_20">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">项目名称</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">板块公司</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">实施单位</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh-right"
            >重置</el-button
          >
          <!-- <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->

          <el-button type="text" class="cursor" @click="fold = !fold">
            <i class="el-icon-arrow-down fold" :class="{foldRotate:fold}" />
            <span v-if="fold">收缩</span>
            <span v-if="!fold">展开</span>
          </el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mt_20" v-if="fold">
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">所属行业</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">项目状态</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">项目阶段</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="card">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="ID" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="Title">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="Author" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Pageviews" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.pageviews }}
          </template>
        </el-table-column>
        <el-table-column
          class-name="status-col"
          label="Status"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="created_at"
          label="Display_time"
          width="200"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.display_time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      fold:false
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
      });
    },
  },
};
</script>
